<template>
  <div style="width: 100%" class="getPropertiesDialog">
    <el-dialog title="选择属性" width="1000px" :visible.sync="visible" :modal-append-to-body="false">
      <m-s-search :list="option.column" @searchClick="(val)=>{searchQuery=val,getList()}"></m-s-search>
      <div style="width: 100%" v-if="visible">
        <el-tag size="small">当前表格已选择 <span style="font-weight: 700;font-size: 15px">{{ showNum }}</span>
          条数据
        </el-tag>
        <p></p>
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="tableData"
                   @selection-change="v=>selection=v"
                   :page.sync="page"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   ref="crud">
          <template slot="columnDefault" slot-scope="{row}">
            {{ row.columnDefaultNameCn }}
          </template>
        </avue-crud>
      </div>
      <div slot="footer" style="text-align: center">
        <el-button size="medium" type="primary" @click="addToList">添加</el-button>
        <el-button size="medium" @click="visible=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/common"
import MSSearch from "@/DMDComponents/MSSearch.vue";
import {request} from "axios";
import * as common from "@/api/common";

export default {
  name: "getPropertiesDialog",
  components: {MSSearch},
  props: {
    column: {
      type: Array,
      default: () => {
        return []
      }
    },
    type: {
      type: String,
      default: () => {
        return null
      }
    },
    ids: {
      type: String,
      default: () => ""
    }
  },
  inject: ["allFormData"],
  data() {
    return {
      visible: false,

      page: {
        pageSize: 10,
        currentPage: 1,
        total: 1
      },
      tableData: [],
      loading: false,
      option: {
        rowKey: 'oid',
        reserveSelection: true,
        tip: false,
        height: '400px',
        calcHeight: 30,
        dialogWidth: 900,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        selection: true,
        labelWidth: 120,
        menuWidth: 200,
        viewBtn: false,
        dialogClickModal: false,
        tabs: true,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        align: "left",
        menu: false,
        header: false,
        column: this.column
      },

      selection: [],
      // 回选的list
      recirculationSelection: [],

      params: {},
      searchQuery: {},
    }
  },
  computed: {
    /**
     * 将回选的数据计入表格所有选择项中
     * 如果已经执行 selection-change 则需要把回选数据中对应的数据删除
     * */
    showNum() {
      let ids = this.selection.map(i => i.oid);
      let r = this.deepCopy(this.recirculationSelection);
      this.recirculationSelection = [];
      r.forEach(item => {
        if (!ids.includes(item.oid)) {
          this.recirculationSelection.push(item);
        }
      })
      this.selection.push(...this.recirculationSelection)
      ids.push(...this.recirculationSelection.map(i => i.oid));
      // let arr = [...new Set(ids)];

      return ids.length;
    }
  },
  methods: {
    addToList() {
      if (this.selection.length === 0) {
        this.$message.warning("请选择数据");
        return;
      }
      this.$emit('addToList', this.deepCopy(this.selection));
    },
    /**
     * @param list 回选的数据集合
     * @param params 需要传入list查询接口的数据
     * */
    open(list, params) {
      this.page = {pageSize: 10, currentPage: 1};
      this.recirculationSelection = list;
      this.selection = [];
      this.params = params;
      this.getList();
    },
    toggleRowSelection() {
      if (this.tableData.length > 0 && this.recirculationSelection.length > 0) {
        let ids = this.recirculationSelection.map(item => item.oid);
        this.tableData.forEach(item => {
          if (ids.includes(item.oid)) {
            this.$refs.crud.toggleRowSelection(item, true);
          }
        })
      }
    },
    close() {
      this.visible = false;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getList();

    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getList();
    },
    getList() {
      // const {type, refType} = this.allFormData();
      // let dynamicFlag = type ? type : refType;
      let dynamicFlag = this.type !== null ? (this.type === 1 ? 1 : 0) : "1";
      let ids = {};
      if (this.ids) {
        ids = {ids: this.ids}
      }
      api.getPropertiesList({
        current: this.page.currentPage,
        size: this.page.pageSize,
        ...this.params,
        ...{dynamicFlag: dynamicFlag, state: 1},
        ...this.searchQuery,
        ...ids
      }).then(res => {
        const {list, totalRows} = res.data.data;
        this.visible = true;
        this.tableData = list;
        this.page.total = totalRows;
        this.$nextTick(() => {
          this.toggleRowSelection();
        })
      })
    }
  }
}
</script>
<style lang="scss">
.getPropertiesDialog {
  .search-box {
    .formData {
      margin-left: 0 !important;
    }
  }
}
</style>
